import React, { useEffect } from 'react';
import ProForm, { ProFormText, ProFormDigit, ProFormTextArea } from '@ant-design/pro-form';
import { Cascader, message, Modal } from 'antd';
import { addGood } from '@/services/goods';
import { connect } from 'umi';
import OssUpload from '@/components/OssUpload';

const AddGood: React.FC = (props) => {
  const { isModalVisible, actionRef, setModalStatus, dispatch, category } = props;

  // ! 定义 Form 实例，用来操作表单
  const [formInstance] = ProForm.useForm();

  useEffect(() => {
    dispatch({ type: 'category/getCategory', payload: null });
  }, []);

  const onAddGood = async (values) => {
    console.log(values);

    const rep = await addGood(values);
    if (rep.status === undefined) {
      message.success('添加成功');

      // 刷新表格数据(由 ant-pro-components 提供)
      actionRef.current.reload();

      // 关闭模态框
      setModalStatus(false);
    }
  };

  const setCoverKey = (fileKey) => {
    return formInstance.setFieldsValue({ cover: fileKey });
  };

  return (
    <Modal
      title="添加商品"
      visible={isModalVisible}
      footer={null}
      onCancel={() => {
        setModalStatus(false);
      }}
      destroyOnClose={true}
    >
      <ProForm form={formInstance} onFinish={(values) => onAddGood(values)}>
        <ProForm.Item
          label="分类"
          name="category_id"
          rules={[{ required: true, message: '请输入分类' }]}
        >
          <Cascader
            placeholder="请选择分类"
            fieldNames={{ label: 'name', value: 'id' }}
            options={category}
          />
        </ProForm.Item>
        <ProFormText
          name="title"
          label="商品名"
          placeholder="请输入商品名"
          rules={[
            {
              required: true,
              message: '请输入商品名',
            },
          ]}
        />
        <ProFormTextArea
          name="description"
          label="描述"
          placeholder="请输入描述"
          rules={[
            {
              required: true,
              message: '请输入描述',
            },
          ]}
        />
        <ProFormDigit
          name="price"
          label="价格"
          min={0}
          max={999999}
          placeholder="请输入价格"
          rules={[
            {
              required: true,
              message: '请输入价格',
            },
          ]}
        />
        <ProFormDigit
          name="stock"
          label="库存"
          min={1}
          max={9999}
          placeholder="请输入库存"
          rules={[
            {
              required: true,
              message: '请输入库存',
            },
          ]}
        />
        <ProForm.Item
          label="商品图"
          name="cover"
          rules={[{ required: true, message: '请添加商品图' }]}
        >
          <div>
            <OssUpload setCoverKey={setCoverKey}></OssUpload>
          </div>
        </ProForm.Item>
        <ProFormTextArea
          name="details"
          label="详情"
          placeholder="请输入详情"
          rules={[
            {
              required: true,
              message: '请输入详情',
            },
          ]}
        />
      </ProForm>
    </Modal>
  );
};

// connect 参数为 Dva 模块名，连接后的数据会在组件 props 上
export default connect(({ category }) => ({ category: category.category }))(AddGood);
